<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="a" @click="currentCom = 'comA'">
    <input type="button" value="b" @click="currentCom = 'comB'">
    <input type="button" value="c" @click="currentCom = 'comC'">

<!--    component 通过is属性的取值 来挂载不同的组件-->
    <component :is="currentCom"></component>
</div>
     <script>
         new Vue({
             el: '#app',
             data: {
                 msg: '你好',
                 currentCom: ''
             },
             components: {
                 comA: {
                     template: '<div>组件a</div>'
                 },
                 comB: {
                     template: '<div>组件b</div>'
                 },
                 comC: {
                     template: '<div>组件c</div>'
                 }
             }
         })
     </script>
</body>
</html>
